<template>
  <div class="container">
    <div class="main">
      <div class="fare_title">
        <h3>{{parkName}}</h3>
        <span>请付款</span>
        <p class="">{{supposeCost}}元</p>
      </div>
      <div class="fare_detail">
        <ul>
          <li>
            <div class="payable">
              <label>应付金额</label>
              <span>{{supposeCost}}</span>
            </div>
            <div class="paid">
              <label>已付金额</label>
              <span>{{paidCost}}</span>
            </div>
          </li>
          <li><label>车牌号码</label><span>{{licenseNumber}}</span></li>
          <li><label>入场时间</label><span>{{formDate(enterTime)[0]}}  {{formDate(enterTime)[1]}}</span></li>
          <li><label>停车时长</label><span>{{formatDuring(parkTime)}}</span></li>
        </ul>
      </div>

      <div class="pay_cont">
        <p><img src="../assets/images/tip.png" alt=""><span>请于付款后15分钟内离场，超时将加收停车费</span></p>
        <div class="immediate" @click="payment">
          立即付款
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formDate,formatDuring } from '../utils/js/formdate.js';  
import { querylicense, payservice } from '../utils/api.js';
export default {
  data() {
    return {
      parkName: '凯晨世贸停车场', // 停车场名
      supposeCost: '0.00', // 应付金额
      paidCost: '0.00', // 已付金额
      totalCost: '', // 账户总金额
      enterTime: '', // 入场时间
      parkTime: '', // 停车时长
      plateNo: '', // 车牌号
      msgType: '' // 消息类型
    }
  },
  computed:{
    // count:function(){
    //   return this.supposeCost.toFixed(2)
    // },
    // accountPaid:function(){ 
    //   return this.paidCost.toFixed(2)
    // },
    licenseNumber:function(){
      return this.plateNo.substr(0,1)+'·'+this.plateNo.substr(1,1)+this.plateNo.substr(3,3).replace(/./g, "*")+this.plateNo.substr(5,2)
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    if(this.$route.query.plateNo){
      this.plateNo = decodeURI(this.$route.query.plateNo);
      console.log(this.plateNo)
      this.getPreBill();
    }
    var ua = navigator.userAgent.toLowerCase();
    // 几种支付场景参数 (WXPay.jsPay 微信公众号支付)  (trade.jsPay 支付宝支付) (acp.jsPay 银联云闪付) (bestpay.jspay翼支付
    if(ua.match(/MicroMessenger/i) == "micromessenger") {
      this.msgType = 'WXPay.jsPay';
    } else if(ua.match(/AlipayClient/i) == 'alipayclient'){
      this.msgType = 'trade.jsPay';  // 支付宝
    } else {
      this.msgType = 'acp.jsPay';  // 支付宝
    }
    // this.enterTime = new Date();
  },
  methods:{
    // 获取车辆账单信息
    async getPreBill(){
      const data = {
        // parkSyscode: '',
        plateNo: this.plateNo // 车牌号
      }
      const res = await querylicense(data);
      if(res.data.code == '0'){
        console.log(res,'车辆账单信息')
        const data = res.data.data;
        this.parkName = data.parkName; // 停车场名
        this.supposeCost = data.supposeCost; // 应付金额
        this.paidCost = data.paidCost; // 已付金额
        this.enterTime = data.enterTime; // 入场时间
        this.parkTime = data.parkTime; // 停车时间
        this.totalCost = data.totalCost; // 账户总金额
      }else{
        alert(res.data.msg)
      }
    },
    // 获取具体时长 xx天xx小时xx分xx秒
    formatDuring(data){
      return formatDuring(data)
    },
    // 入场时间精确到具体秒 日期格式为 2021.09.05  19:05:47
    formDate(date){
      return formDate(date)
    },
    // 立即付款
    payment(){
      console.log('立即付款')
      const data = {
        totalAmount: this.supposeCost, // 支付总金额
        // mid: '', // 商户号
        // tid: '', // 终端号
        // msgSrc: '', // 消息来源
        msgType: this.msgType,  // 消费类型
        goods:{
          goodsId: '', // 商品id
          goodsName: '', // 商品名称
          quantity: '', // 商品数量
          price: '', // 商品单价
          goodsCategory: '', // 商品分类
          body: '' // 商品说明 
        }
      }
      payservice(data).then((res)=>{
        console.log(res)
        if(res.data.code == '0'){
          alert('支付成功')
        }else{
          alert('支付失败')
        }
      }).catch((error)=>{
        console.log(error)
      })
    }
  }
}
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
@import '../assets/styles/detail.scss';
</style>